<template>
  <div class="total">
    <el-container>
      <el-main>
        <div class="top">
          <el-image style="width: 100%; height: 100%" :src="require('/src/components/img/微信图片_20220723173022.jpg')" fit="cover"></el-image>
        </div>
        <div class="fang">
          <span>江景会所</span>
          <p class="miaosu">拥有大量的平台、露台和大面积玻璃围合的通透空间，带来更为独特和亲近的黄浦江美景。能提供休闲、健身、游泳、桑拿、SPA及私人宴会等服务。</p>
        </div>
        <div class="content">
          <div class="crad">
            <div class="image">
              <img src="@/assets/agentImage/06.jpg" alt="" />
            </div>
            <p class="text">儿童游乐室</p>
          </div>
          <div class="crad">
            <div class="image">
              <img src="@/assets/agentImage/07.jpg" />
            </div>
            <p class="text">室外休闲区</p>
          </div>
          <div class="crad">
            <div class="image">
              <img src="@/assets/agentImage/08.jpg" />
            </div>
            <p class="text">一品御宴</p>
          </div>
          <div class="crad">
            <div class="image">
              <img src="@/assets/agentImage/09.jpg" />
            </div>
            <p class="text">室内恒温游泳池</p>
          </div>
          <div class="crad">
            <div class="image">
              <img src="@/assets/agentImage/10.jpg" />
            </div>
            <p class="text">咖啡厅</p>
          </div>
          <div class="crad">
            <div class="image">
              <img src="@/assets/agentImage/11.jpg" />
            </div>
            <p class="text">健身区</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getAgetList } from '@/api/agets'
export default {
  data() {
    return {
      list: []
      // cardList: [
      //   { src: '/src/assets/agentImage/06.jpg', text: '儿童游乐室' },
      //   { src: '/src/assets/agentImage/07.jpg', text: '室外休闲区' },
      //   { src: '/src/assets/agentImage/08.jpg', text: '一品御宴' },
      //   { src: '/src/assets/agentImage/09.jpg', text: '室内恒温游泳池' },
      //   { src: '/src/assets/agentImage/10.jpg', text: '咖啡厅' },
      //   { src: '/src/assets/agentImage/11.jpg', text: '健身区' }
      // ]
    }
  },
  created() {
    this.getAgetList()
  },
  methods: {
    async getAgetList() {
      const res = await getAgetList()

      this.list = res.data
      console.log(this.list)
    }
  }
}
</script>

<style scoped lang="less">
.el-main {
  padding: 0;
}
.agents-list {
  width: 80%;
  margin: 0 auto;
}
.fang {
  margin-top: 40px;
  span {
    font-weight: bold;
    font-family: '微软雅黑';
    font-size: 28px;
    color: #595959;
  }
  .miaosu {
    font-family: 'Microsoft JhengHei';
    margin: 30px 0 0px;
  }
}
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  .crad {
    width: 30%;
    margin: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    .image {
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .text {
      width: 100%;
      height: 40px;
      background-color: #c5a544;
      line-height: 40px;
      color: white;
      font-weight: 550;
      overflow: hidden;
    }
  }
}
</style>
